<template>
    <div class="header-container">
        <div class="header-left">
            <NuxtLink to="/">
                <div class="mt-[10px] mb-[10px] flex justify-start items-center w-[300px]">
                    <img class="h-[40px] w-[40px]" :src="sysLogoUrl ? getUrl(sysLogoUrl) : '/assets/images/logo.png'" />
                    <span class="inline-block ml-2 text-lg">{{ sysName ? sysName : 'tmAdmin' }}</span>
                </div>
            </NuxtLink>
        </div>
        <div class="header-content">
            <el-menu :default-active="route.path" class="h-full w-full !block" mode="horizontal" :ellipsis="false"
                :router="true">
                <el-menu-item v-for="(item, index) in menu" :index="item.path">
                    <NuxtLink v-if="item.component == 'admin'" :to="sysAdminUrl" target="_blank">
                        <span class="text">{{ item.name }}</span>
                    </NuxtLink>
                    <div v-else-if="item.component == 'mobile'" @click="showMobileDialog = true">
                        <span class="text">{{ item.name }}</span>
                    </div>
                    <NuxtLink v-else :to="item.path">
                        <span class="text">{{ item.name }}</span>
                    </NuxtLink>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="header-right">
            <div v-if="userIsLogin">
                <el-dropdown v-if="userStore.isLogin" @command="handleCommand">
                    <div class="flex items-center">
                        <el-avatar :size="25" :src="userInfo?.avatar" />
                        <div class="ml-1 text-white flex">
                            <span class="mr-2 truncate max-w-[120px] inline-block">{{ userInfo?.nickname }}</span>
                            <el-icon><el-icon-arrow-down /></el-icon>
                        </div>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <NuxtLink to="/user/center">
                                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                            </NuxtLink>
                            <NuxtLink to="/user/set">
                                <el-dropdown-item command="account">
                                    账号安全
                                </el-dropdown-item>
                            </NuxtLink>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <NuxtLink to="/login" v-else>
                <el-button type="primary" link>登录</el-button>
            </NuxtLink>
        </div>
    </div>
    <MobileDialog v-if="showMobileDialog" :url="sysAppUrl" @close="showMobileDialog = false" />
</template>
<script lang="ts" setup>
import MobileDialog from "./mobile.vue";
import useUserStore from "@/stores/user";
import useConfigStore from "@/stores/config";
import { messageBox } from "@/utils/message";
import { getUrl } from "@/utils/common";

const route = useRoute();
const { menu } = useMenu();
const userStore = useUserStore();
const configStore = useConfigStore();
const showMobileDialog = ref(false);

const userIsLogin = computed(() => {
    return userStore.isLogin;
});

const userInfo: any = computed(() => {
    return userStore.info;
});

const sysName = computed(() => {
    return configStore.sysConfig?.base?.pc_name;
});

const sysLogoUrl = computed(() => {
    return configStore.sysConfig?.base?.pc_logo;
});

const sysAdminUrl = computed(() => {
    return configStore.sysConfig?.adminPath;
});

const sysAppUrl = computed(() => {
    return configStore.sysConfig?.appPath;
});

const handleCommand = (command: string) => {
    switch (command) {
        case 'logout':
            messageBox('确认要退出吗？').then(async () => {
                await userStore.logout();
                navigateTo('/login');
            });
    }
}

</script>

<style lang="scss" scoped>
.header-container {
    display: flex;
    width: 1200px;
    margin: 0 auto;

    .header-left {
        flex: 0 0;
        height: 100%;
        text-align: center;
        display: flex;
        justify-items: center;
        align-items: center;
    }

    .header-content {
        flex: 1;
        text-align: center;
        display: flex;
        justify-items: center;
        align-items: center;

        .text {
            font-size: 16px;
        }
    }

    .header-right {
        flex: 0 0 180px;
        text-align: center;
        display: flex;
        justify-content: flex-end;
        justify-items: center;
        align-items: center;

        :deep(.el-tooltip__trigger:focus-visible) {
            outline: none;
        }

    }
}

.el-menu-item {
    border: none !important;

    &:hover {
        color: var(--el-menu-hover-text-color) !important;
    }
}

.el-menu--horizontal.el-menu {
    border-bottom: none;
}
</style>
